<template>
  <el-scrollbar style="height:300px">
    <el-row>
      <el-col :span="2">表编号</el-col>
      <el-col :span="6">
        <nfnumber v-bind="metaTable.tableId" v-model="modelTable.tableId"/>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">表名</el-col>
      <el-col :span="6">
        <nftext v-bind="metaTable.tableName" v-model="modelTable.tableName"/>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">字段数</el-col>
      <el-col :span="6">
        <nfnumber v-bind="metaTable.colCount" v-model="modelTable.colCount"/>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"> 序号 </el-col>
      <el-col :span="3"> 字段名 </el-col>
      <el-col :span="3"> 中文名 </el-col>
      <el-col :span="3"> 字段类型 </el-col>
      <el-col :span="2"> 字段大小 </el-col>
      <el-col :span="3"> 控件类型 </el-col>
      <el-col :span="3"> 说明 </el-col>
    </el-row>
    <el-row :gutter="20"
      v-for="(item) in modelColumList"
      :key="'col_' + item.columId"
    >
      <el-col :span="3">
        <nftext v-bind="metaColumn.columnId" v-model="item.columnId"/>
      </el-col>
      <el-col :span="3">
        <nftext v-bind="metaColumn.colName" v-model="item.colName"/>
      </el-col>
      <el-col :span="3">
        <nftext v-bind="metaColumn.cnName" v-model="item.cnName"/>
      </el-col>
      <el-col :span="3">
        <nftext2 v-bind="metaColumn.colType" v-model="item.colType"/>
      </el-col>
      <el-col :span="2">
        <nftext2 v-bind="metaColumn.colSize" v-model="item.colSize"/>
      </el-col>
      <el-col :span="3">
        <nfselects v-bind="metaColumn.controlType" v-model="item.controlTypes"/>
      </el-col>
      <el-col :span="3">
        <nftext v-bind="metaColumn.comment" v-model="item.comment"/>
      </el-col>
    </el-row>
    <hr>
    <nfarea v-bind="metaColumn.colData" v-model="colData"/>
  </el-scrollbar>
</template>

<script>
import { nextTick, reactive, ref, watch } from 'vue'
import VueDS from 'vue-data-state'

// 表单的 meta
const _metaTable = reactive({
  tableId: {
    controlId: 10001,
    colName: 'tableId',
    label: '表编号',
    controlType: 120,
    defValue: 1000,
    placeholder: '表编号',
    title: '表编号'
  },
  tableName: {
    controlId: 10002,
    colName: 'tableName',
    label: '表名',
    controlType: 101,
    defValue: '',
    placeholder: '表名',
    title: '表名'
  },
  colCount: {
    controlId: 10003,
    colName: 'colCount',
    label: '字段数量',
    controlType: 120,
    defValue: 0,
    min: 0,
    max: 200,
    placeholder: '字段数量',
    title: '字段数量'
  }
})

// 表单的 meta
const _metaColumn = reactive({
  colData: {
    controlId: 10110,
    colName: 'colData',
    label: '用于导入',
    controlType: 100,
    defValue: '',
    placeholder: '用于导入',
    title: '用于导入'
  },
  columnId: {
    controlId: 10101,
    colName: 'columnId',
    label: '字段编号',
    controlType: 120,
    defValue: '1000001',
    placeholder: '字段编号',
    title: '字段编号'
  },
  colName: {
    controlId: 10102,
    colName: 'colName',
    label: '字段名',
    controlType: 101,
    defValue: '字段名',
    placeholder: '字段名',
    title: '字段名'
  },
  cnName: {
    controlId: 10103,
    colName: 'cnName',
    label: '中文名称',
    controlType: 101,
    defValue: '中文名称',
    placeholder: '中文名称',
    title: '中文名称'
  },
  colType: {
    controlId: 10104,
    colName: 'colType',
    label: '字段类型',
    controlType: 101,
    defValue: '字段类型',
    placeholder: '字段类型',
    title: '字段类型',
    optionList: [
      { value: 'int', label: 'int' },
      { value: 'varchar', label: 'varchar' },
      { value: 'date', label: 'date' },
      { value: 'datetime', label: 'datetime' }
    ]
  },
  colSize: {
    controlId: 10105,
    colName: 'colSize',
    label: '字段大小',
    controlType: 101,
    defValue: '字段大小',
    placeholder: '字段大小',
    title: '字段大小'
  },
  controlType: {
    controlId: 10106,
    colName: 'controlType',
    label: '控件类型',
    controlType: 101,
    defValue: '控件类型',
    placeholder: '控件类型',
    title: '控件类型',
    'show-all-levels': false,
    optionList: [
      {
        value: '数字',
        label: '数字',
        children: [
          { value: '120', label: '数字' },
          { value: '121', label: '滑块' }
        ]
      },
      {
        value: '文本',
        label: '文本',
        children: [
          { value: '101', label: '单行文本' },
          { value: '100', label: '多行文本' },
          { value: '102', label: '密码' },
          { value: '103', label: '电话' },
          { value: '104', label: '邮件' },
          { value: '105', label: 'url' },
          { value: '106', label: '搜索' },
          { value: '107', label: '可填可选' }
        ]
      },
      {
        value: '日期',
        label: '日期',
        children: [
          { value: '110', label: '日期' },
          { value: '111', label: '日期时间' },
          { value: '112', label: '年月' },
          { value: '113', label: '年周' },
          { value: '114', label: '年' },
          { value: '115', label: '任意时间' },
          { value: '116', label: '固定时间' }
        ]
      },
      {
        value: '选择',
        label: '选择',
        children: [
          { value: '150', label: '勾选' },
          { value: '151', label: '开关' },
          { value: '152', label: '多选组' },
          { value: '153', label: '单选组' },
          { value: '160', label: '下拉' },
          { value: '161', label: '下拉多选' },
          { value: '162', label: '下拉联动' }
        ]
      }
    ]
  },
  comment: {
    controlId: 10107,
    colName: 'comment',
    label: '说明',
    controlType: 101,
    defValue: '说明',
    placeholder: '说明',
    title: '说明'
  }
})

// 获取新的字段
const getNewColumn = (id, colName, cnName, colType) => {
  const _tmp = {
    columnId: id,
    colName: colName,
    cnName: cnName,
    colType: colType,
    colSize: 10,
    controlType: 101,
    controlTypes: ['文本', '101']
  }
  return _tmp
}

// 设置监听
const setWatch = (obj, key) => {
  // 监听字段类型
  watch(() => obj[key].colType, (v1, v2) => {
    // console.log('字段ID', id, '类型', v1)
    if (typeof v1 === 'undefined') return
    switch (v1) {
      case '数组':
        obj[key].colSize = 4
        obj[key].controlType = 161
        obj[key].controlTypes = ['选择', '161']
        break
      case 'bit':
        obj[key].colSize = 1
        obj[key].controlType = 151
        obj[key].controlTypes = ['选择', '151']
        break
      case 'int':
        obj[key].colSize = 4
        obj[key].controlType = 120
        obj[key].controlTypes = ['数字', '120']
        break
      case 'varchar':
        obj[key].colSize = 100
        obj[key].controlType = 101
        obj[key].controlTypes = ['文本', '101']
        break
      case 'date':
        obj[key].colSize = 8
        obj[key].controlType = 110
        obj[key].controlTypes = ['日期', '110']
        break
    }
    console.log('columnId colType', obj[key].columnId)
  },
  { immediate: true })

  // 监听控件类型
  watch(() => obj[key].controlTypes, (v1, v2) => {
    if (v1 === null) { return }
    obj[key].controlType = v1[1]
    console.log('columnId controlTypes', obj[key].columnId)
  })
}

</script>

<script setup>
// 组件
import nftext from '/ctrl/nf-el-form-item/el-form-t-text.vue'
import nfarea from '/ctrl/nf-el-form-item/el-form-t-area.vue'
import nftext2 from '/ctrl/nf-el-form-item/el-form-t-autocomplete.vue'
import nfnumber from '/ctrl/nf-el-form-item/el-form-n-number.vue'
import nfselects from '/ctrl/nf-el-form-item/el-form-s-select-cascader.vue'

// 状态
const { reg, get } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()

// 表的meta
const metaTable = _metaTable
// 字段的meta
const metaColumn = _metaColumn

// 导入的数据
const colData = ref('')

// 表的model
const modelTable = helpDataBaseMeta.tableMeta
// 字段的 model 数据列表
const modelColumList = helpDataBaseMeta.columnListMeta

let stopColCount = false

// 监听导入数据的变化
watch(() => colData.value, (v1,v2)=>{
  // console.log(v1)
  // 暂停
  stopColCount = true

  let _colCount = 0

  const arr = v1.split('\n')
  // console.log(arr)
  arr.forEach((item, index) => {
    const cols = item.split('\t')
    console.log(cols)
    if (cols.length === 3 ){
      _colCount ++
      const id = modelTable.tableId + (_colCount * 10).toString().padStart(3,'0')
      modelColumList['c_' + id] = getNewColumn(id, cols[0], cols[1], cols[2])
      setWatch(modelColumList, 'c_' + id)
    }
  })
  modelTable.colCount = _colCount
  // 开启
  nextTick(()=>{
    stopColCount = false
  })
})

// 监听变化，设置字段数量
watch(() => modelTable.colCount, (v1, v2) => {
  if (stopColCount) return

  // console.log('colCount', v1, v2)
  if (v2 < v1) {
    // 增加字段
    for (let i = v2; i < v1; i++) {
      const id = modelTable.tableId + (i * 10).toString().padStart(3,'0')
      modelColumList['c_' + id] = getNewColumn(id,'c_' + id, '新字段' + id, 'int')
      setWatch(modelColumList, 'c_' + id)
      /*
      // console.log('columnId', modelColumList['c_' + id].columnId)
      modelColumList['c_' + id].columnId = id
      modelColumList['c_' + id].colName += id
      // 监听字段类型
      watch(() => modelColumList['c_' + id].colType, (v1, v2) => {
        // console.log('字段ID', id, '类型', v1)
        if (typeof v1 === 'undefined') return
        switch (v1) {
          case 'int':
            modelColumList['c_' + id].colSize = 4
            modelColumList['c_' + id].controlType = 120
            modelColumList['c_' + id].controlTypes = ['数字', '120']
            break
          case 'varchar':
            modelColumList['c_' + id].colSize = 100
            modelColumList['c_' + id].controlType = 101
            modelColumList['c_' + id].controlTypes = ['文本', '101']
            break
          case 'date':
            modelColumList['c_' + id].colSize = 8
            modelColumList['c_' + id].controlType = 110
            modelColumList['c_' + id].controlTypes = ['日期', '110']
            break
        }
        console.log('columnId colType', modelColumList['c_' + id].columnId)
      })

      // 监听控件类型
      watch(() => modelColumList['c_' + id].controlTypes, (v1, v2) => {
        if (v1 === null) { return }
        modelColumList['c_' + id].controlType = v1[1]
        console.log('columnId controlTypes', modelColumList['c_' + id].columnId)
      })*/
    }
  }
})

</script>
